<template>
	<div class="cr-con">
		<div class="title-group">
			<div class="title-item">道路建设率 62.6%</div>
			<div class="title-item">主干路建设率为：75.4%</div>
			<div class="title-item">次干路建设率为：63.5%</div>
			<div class="title-item">支路建设率为：46.6%</div>
		</div>
		<div class="chart-group">
			<div class="chart-item">
				<div class="title">
					<div>兰山区（69.07%）</div>
					<div class="small">单位：km</div>
				</div>
				<div class="con" id="first"></div>
			</div>
			<div class="chart-item">
				<div class="title">
					<div>罗庄区（62.43%）</div>
					<div class="small">单位：km</div>
				</div>
				<div class="con" id="second"></div>
			</div>
			<div class="chart-item">
				<div class="title">
					<div>河东区（58.91%）</div>
					<div class="small">单位：km</div>
				</div>
				<div class="con" id="third"></div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		onMounted,
		nextTick,
		inject
	} from 'vue';
	export default defineComponent({
		setup(props, {
			emit
		}) {
			const state = reactive({});
			onMounted(() => {
				setOptions(document.getElementById('first'), [71.7, 531.5, 249.8, 380.5], [30.2, 435.4,
					191.4, 175.8
				]);
				setOptions(document.getElementById('second'), [59.3, 350.7, 175.6, 194.4], [20.3, 271.4,
					97.9, 80.6
				]);
				setOptions(document.getElementById('third'), [84.8, 480.6, 160.7, 308.8], [15.7, 320.8,
					83.1, 155.8
				]);
			});
			const echarts = inject('echarts');
			const setOptions = (el, data1, data2) => {
				const myChart = echarts.init(el);
				var xData = ['快', '主', '次', '支'];
				let option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow',
							textStyle: {
								color: '#fff',
							},
						},
					},
					grid: {
						borderWidth: 0,
						top: 14,
						right: 20,
						bottom: 24,
						textStyle: {
							color: '#fff',
						},
					},
					calculable: true,
					xAxis: [{
						type: 'category',
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							interval: 0,
							textStyle: {
								color: '#ffffff',
								fontSize: 12,
							},
						},
						splitLine: {
							show: false,
						},
						splitArea: {
							show: false,
						},
						data: xData,
					}, ],
					yAxis: [{
						type: 'value',
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
						},
						axisLabel: {
							textStyle: {
								color: '#ffffff',
								fontSize: 12,
							},
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(193, 207, 220, 1)',
								// type: 'dashed'
							},
						},
					}, ],
					series: [{
							name: '',
							type: 'bar',
							barMaxWidth: 10,
							barGap: '20%',
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: 'rgba(32, 242, 255, .8)',
										},
										{
											offset: 1,
											color: 'rgba(32, 242, 255, 1)',
										},
									]),
									label: {
										show: false,
									},
									// barBorderRadius: [4, 4, 0, 0], //圆角大小
								},
							},
							data: data1,
						},
						{
							name: '',
							type: 'bar',
							barMaxWidth: 10,
							barGap: '20%',
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: 'rgba(168, 255, 83, .8)',
										},
										{
											offset: 1,
											color: 'rgba(168, 255, 83, 1)',
										},
									]),
									label: {
										show: false,
									},
									// barBorderRadius: [4, 4, 0, 0], //圆角大小
								},
							},
							data: data2,
						},
					],
				};
				myChart.setOption(option);
			};
			return {
				...toRefs(state),
			};
		},
	});
</script>
<style scoped lang="less">
	.cr-con {
		height: calc(27vh + 10px);
		background: url('../images/bg-mid.png') no-repeat;
		background-size: 100% 100%;
		margin-top: -10px;
		display: flex;
		flex-direction: column;

		.title-group {
			display: flex;
			padding: 2vw 1vw 1vw;

			.title-item {
				margin-right: 20px;
				font-size: 16px;
			}
		}

		.chart-group {
			height: 0;
			flex-grow: 1;
			display: flex;
			justify-content: space-between;
			padding: 0 10px;

			.chart-item {
				width: calc((100% - 20px) / 3);
				// flex-grow: 1;
				margin-bottom: 10px;
				background: rgba(255, 255, 255, 0.1);
				border: 1px solid #b8e1fa;
				border-radius: 4px;
				display: flex;
				flex-direction: column;

				.con {
					height: 0;
					flex-grow: 1;
				}

				.title {
					display: flex;
					justify-content: space-between;
					padding: 10px 10px 0;
					font-size: 14px;

					.small {
						font-size: 12px;
					}
				}
			}
		}
	}
</style>